<template>
	<div>
		<div class="submitarea">
			<y-button
				text="确认修改数据"
				:height="20"
				:hollow="true"
				:showIcon="false"
				:width="100"
				@click="submitdata"
			></y-button>
			<y-button
				text="清空数据"
				:height="20"
				:hollow="true"
				:showIcon="false"
				:width="100"
			></y-button>
		</div>
		<div class="submitfrom">
			<!-- <y-input v-model="item.mapping"  class="edit-source_mapping" @input="onInput"></y-input> -->
			<div
				class="submitrow"
				v-for="(item, index) in targetJsonObj"
				:key="index"
			>
				<y-form-item
					:staticTitle="true"
					align="topToBottom"
					height="auto"
					:title="`第${index + 1}条数据`"
				>
					<y-button
						text="- 删除此条数据"
						:height="20"
						:hollow="true"
						:showIcon="false"
						:width="100"
						class="deleterow"
						@click="delrow(index)"
					></y-button>
					<div
						class="submitunit"
						v-for="unit in item.model"
						:key="unit.key + Math.random()"
					>
						<div class="unit_title">{{ unit.description }}:</div>
						<y-input
							class="edit-source_mapping"
							v-model="item[unit.key]"
							:type="unit.type == 'number' ? 'number' : 'text'"
							@change="numberformart(unit.type, index, unit.key)"
						></y-input>
					</div>
				</y-form-item>
			</div>
			<y-button
				text="+ 添加数据"
				:height="20"
				:hollow="true"
				:showIcon="false"
				:width="100"
				@click="addrow"
			></y-button>
		</div>
	</div>
</template>

<script>
export default {
	name: "InputByForm",
	data() {
		return {
			targetJsonObj: [], //维护的对象，最终返回这玩意
			model: [], //验证对象的字段，并并入描述
		};
	},
	props: {
		propValue: {
			// 合计栏数据
			default: () => {
				return {};
			},
			type: Object,
		},
		propconfigTextValue: {
			// 合计栏数据
			default: () => {
				return "";
			},
			type: String,
		},
	},
	created() {
		this.init();
	},
	mounted() {},
	computed: {},
	methods: {
		init() {
			let propJson = [];
			try {
				propJson = JSON.parse(this.propconfigTextValue);
			} catch (e) {
				propJson = [];
			}
			this.targetJsonObj = propJson;
			this.model = this.propValue.model;
			this.putmodeloption();
			console.log(this.propValue, this.targetJsonObj);
		},
		addrow() {
			const newobj = {};
			const model = this.model;
			model.forEach((modelunit) => {
				newobj[modelunit.field] = "";
			});
			this.targetJsonObj.push(newobj);
			this.putmodeloption();
		},
		delrow(index) {
			this.targetJsonObj.splice(index, 1);
		},
		numberformart(type, index, key) {
			if (type == "number") {
				try {
					this.targetJsonObj[index][key] = parseFloat(
						this.targetJsonObj[index][key]
					);
					if (isNaN(this.targetJsonObj[index][key])) {
						this.targetJsonObj[index][key] = ~~this.targetJsonObj[index][key];
					}
				} catch (e) {
					console.warn(e);
					this.targetJsonObj[index][key] = ~~this.targetJsonObj[index][key];
				}
			}
		},
		submitdata() {
			const submitobj = JSON.parse(JSON.stringify(this.targetJsonObj));
			submitobj.map((item) => {
				delete item.model;
			});
			const submit = JSON.stringify(submitobj);
			this.$emit("setJsonData", submit);
		},
		putmodeloption() {
			const model = this.model;
			const targetJsonObj = this.targetJsonObj;
			const formart = targetJsonObj.map((item, i) => {
				const e = { ...item };
				const edes = Object.keys(e) || [];
				e.model = [];
				edes.map((des) => {
					model.map((modelunit) => {
						if (modelunit.field == des) {
							e.model.push({
								description: modelunit.description,
								value: e[des],
								key: des,
								index: i,
								type: modelunit.type || "string",
							});
						}
					});
				});
				return e;
			});
			this.targetJsonObj = [...formart];
			console.log(formart);
		},
	},
	components: {},
	watch: {
		propconfigTextValue() {
			this.init();
		},
	},
};
</script>

<style lang="stylus" scoped>
.submitarea {
	display: flex;
	>div {
		margin-right: 5px;
	}
	border: 1px soild #666;
}
.submitfrom {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #666;
	margin: 5px 0;
	padding: 0 5px 5px 5px;
}
.submitunit {
	display: flex;
	margin-bottom: 5px;
	.unit_title {
		line-height: 30px;
	}
}
.submitrow {
	position: relative;
}
.deleterow {
	position: absolute;
	top: 7px;
	right: 20px;
}
</style>
